<template>
    <div id="user">
        <el-row :gutter="-5" class="row_1">
            <el-col :span="6" class="col_1">
                <i class="el-icon-s-custom"></i>
                <span>个人中心</span>
            </el-col>
        </el-row>
        <div class="medium">
            <div class="loadBox">
                <el-form :model="userForm" :rules="userFormRules" ref="userFormRef" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="旧密码" prop="oldPassword">
                        <el-input v-model="userForm.oldPassword" show-password></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" prop="newPassword">
                        <el-input v-model="userForm.newPassword" show-password></el-input>
                    </el-form-item>
                    <el-form-item class="btns">
                        <el-button @click="canelForm">重置</el-button>
                        <el-button type="primary" @click="savePassword">保存</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: "user",
        data(){
            return{
                userForm:{
                    oldPassword:'',
                    newPassword:''
                },
                userFormRules:{
                    oldPassword:[{required:true,message:'不能为空',tigger:'blur'}],
                    newPassword:[{required:true,message:'不能为空',tigger:'blur'}]
                }
            }
        },
        methods:{
            canelForm(){
                this.userForm={};
                this.$refs.userFormRef.resetFields();
            },
            savePassword(){
                this.$message.success("力所能不能及也")
            }
        }
    }
</script>

<style lang="less" scoped>
    .row_1 {
        margin-left: 11px;
        /*background: blue;*/
        border-bottom: 2px solid #cccccc;
        /*position: relative;*/

        .col_1 {
            margin: 15px 0 15px 20px;

            span {
                font-size: 15px;

            }
            .el-icon-s-custom{
                margin-right: 15px;
               font-size: 25px;
            }
        }
    }
    .loadBox{
        width: 1000px;
        height: 300px;
        position: absolute;
        top: 300px;
        left: 800px;
        transform: translate(-50%,-50%);
        .btns{
            display: flex;
            justify-content: flex-end;
        }
    }
    .medium{
        width: 1300px;
    }
</style>
